<template>
  <p>name: {{ name }}</p>
  <p>age: {{ age }}</p>
  <button @click="updateName">update name</button>
</template>
<script>
import { reactive, ref, toRef } from 'vue'
// 需求：在模板中渲染 name 和 age
// 下面的写法有待提高
// 第一：我只希望渲染 name 和 age，你却把整个对象都导出了，性能不好！
// 第二：模板中多次用到了 obj.
export default {
  setup() {
    const obj = reactive({
      name: 'ifer',
      age: 10,
      address: '河南',
      sex: '男',
    })
    // 这儿用 ref(obj.name) 和 toRef(obj, 'name') 有什么区别？
    // ref 转换出来的结果和原来的没有任何关系（不关联）
    const name = ref(obj.name)
    const age = ref(obj.age)

    const updateName = () => {
      /* name.value = 'xxx'
      console.log(obj.name) */
      obj.name = 'xxx'
    }

    return { name, age, obj, updateName }
  },
}
</script>
